<!DOCTYPE html>

<html>
	
<head>
    
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Title -->
<title>Bookish Fellow</title>

<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/flexslider.css">
<link href="css/jquery.selectBoxIt.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
    
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<link href="css/ie.css" rel="stylesheet">
<![endif]-->

</head>

<body>	
	<!-- container -->
	<div class="container"> 
    	<!-- header -->
    	<header id="header">
        	<div class="row">
            	<div class="col-lg-4 col-md-4 col-sm-4">
                	<img id="logo" src="img/logo.png" alt="xxx">
                </div>
                
                <div class="col-lg-8 col-md-8 col-sm-8">
                	<ul id="upper-nav">
                    	<li class="light-blue"><a href="#">Registration</a></li>
                        <li class="red"><a href="#" class="red">Log In</a></li>
                    </ul>
                    <ul id="main-nav">
                    	<li><a href="#">Home</a></li>
                        <li><a href="#">Ebooks</a></li>
                    	<li><a href="#">Price packages</a></li>
                        <li><a href="#">Faq</a></li>
                    </ul>
                </div>
            </div>
        </header>
       	<!-- /header --> 
        
        <!-- main-container -->
       <div class="main-container">
       		<!-- prva sekcija -->
       		<section class="section blue login-form-section">
            	<form id="login-form" class="login-wrap">
                  <h2>Registration</h2>
				  <div class="form-inputs">
					<!-- <p class="sakriveno">* error if do not type</p> -->
					<label for="name">First name</label>
					<input type="text" id="name" name="firstname" placeholder="First name" class="validate-required">
					
					<label for="lastName">Last name</label>
					<input type="text" id="lastName" name="lastname" placeholder="Last name" class="validate-required">
					
					<label for="email">Email address</label>
					<input type="text" id="email" name="email" placeholder="Email address" class="validate-email">
					
					<label for="password">Password</label>
					<input type="password" id="password" name="password" placeholder="Password" class="validate-required">
					
					<label for="confirmPass">Confirm password</label>
					<input type="password" id="confirmPass" name="confirm" placeholder="Confirm password" class="validate-required">
				   </div>
                    <div class="row">
                      <div class="col-lg-4 col-md-4 col-sm-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2">
                        <p class="registration-paragraph"><span class="asteriks">*</span> In case you want to use a social media accounts in order to register with us
                        </p>
                      </div>
                      <div class="col-lg-6 col-md-6 col-sm-6">
                        <input type="submit" class="submit-small pull-left">
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-lg-offset-3 col-md-offset-3 col-sm-offset-3 social-icon">
                          <a href="#"><img src="img/g-plus.png" alt="xxx"></a>
                          <a href="#"><img src="img/twitter.png" alt="xxx"></a>
                          <a href="#"><img src="img/facebook.png" alt="xxx"></a>
                      </div>
                    </div>
                 </form>
            </section>
            <!-- \prva sekcija -->
            <!-- druga sekcija -->
              <section class="section">
              	<img class="logo-big" src="img/logo-big.png" alt="xxx">
				<a class="button big" href="#">SIGN UP AND GET PUBLISHED NOW</a>
            </section>
            <!-- \druga sekcija -->
       </div>
       <!-- \main-container -->
       
       <!-- footer -->
       <footer id="footer">
       	 <a href="#" id="back-to-top"></a>
       	  <div class="row">
       		<div class="col-lg-6 col-md-6 col-sm-6">
            <h4>Bookishfellow</h4>
            <ul class="menu">
            	<li><a href="#">eBooks</a></li>
                <li><a href="#">Add New Title</a></li>
                <li><a href="#">Price Packages</a></li>
                <li><a href="#">Distribution</a></li>
                <li><a href="#">Publishing Agreement</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
            </div>
            
       		<div class="col-lg-6 col-md-6 col-sm-6">
            <h4>Services</h4>
            <ul class="footer-menu">
            	<li><a href="#">eBook Cover Design</a></li>
                <li><a href="#">Author Website</a></li>
                <li><a href="#">Digital Marketing</a></li>
            </ul>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12">
            	<p id="copyright">Copyright © 2014, Darko Mitrovic, All rights reserved</p>
            </div>
         </div>
       </footer>
       <!-- \footer -->
    </div>
	<!-- /container -->
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.selectBoxIt.min.js"></script>
<script src="js/script.js"></script>
</body>

</html>